<template>
	<view class="content">
		<view class="search-input">
			<uni-search-bar placeholder="搜索" radius="36" @confirm="search" @input="input" @cancel="cancel" />
		</view>
		<uni-list class="project-list">
			<uni-list-item :padding="24" v-for="(item, index) in projectList" :key="index"
				:title="item.F_FullName"
				:note="item.F_ProjectCode"
        rightColor="#DC2115"
        :rightText="item.F_ScheduleCodeStr"
				:thumb="item.statusImage"
				@click="toProjectDetail(index)"/>
		</uni-list>
		<view class="all-complete">{{totalPage ? '已加载全部' : '没有符合条件的记录'}}</view>
		<message ref="message"></message>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni/uni-search-bar.vue'
	import uniList from '@/components/uni/uni-list.vue'
	import uniListItem from '@/components/uni/uni-list-item.vue'

  import {list} from "../../api/project/list";
	import store from "@/store/index.js"
	import {CRC} from "../../js/crc";

	export default {
		data() {
			return {
				projectList: [],
        query: {
				  // 分页条件
          pagination: {
            rows: 20,
            page: 1
          },
          // 查询条件
					queryJson: {
						F_FullName: '',
						F_ProjectCode: '',
						StartTime: '',
						EndTime: '',
          }
        },
        // 这是存储search页面带到这里的F_FullName这个搜索条件的。因为在这个页面里可以对这个搜索条件进行修改
        // 存储search页面带过来的搜索条件是为了在调用cancel方法时返回原先search页面的结果
        tempFullName: '',
        // 是否是上拉加载更多，如果是，那么要把数据push到projectList中；如果不是那么要把数据替换projectList
        ifLoadMore: false,
        // 总页数
        totalPage: 0
			}
		},
		methods: {
      /**
       * 获取项目数据
       */
      getList(callback) {
				list(this.query).then(res => {
					if (res.data.code === 200) {
            let list = res.data.data.rows.map(item => {
              if (!item.F_ScheduleCode) item.F_ScheduleCodeStr = "暂无";
              this.assignStatusImage(item); // 根据item的状态填充statusImage字段，就是把中文转为英文后赋值给item的statusImage字段
              return item;
            });

            if (this.ifLoadMore) {
              this.projectList.push(...list);
            } else {
              this.projectList = list;
            }
            this.totalPage = res.data.data.total;
            callback && callback()
          }
        })
      },
			/**
			 * 根据项目的status状态，转成项目对应的图片地址
			 */
			assignStatusImage(item) {
      	let status;
				switch (item.F_ScheduleCode) {
					case '1':
						item.F_ScheduleCodeStr = '立项';
						status = 'start';
						break;
					case '2':
						item.F_ScheduleCodeStr = '开工';
						status = 'working';
						break;
					case '3':
						item.F_ScheduleCodeStr = '完工';
						status = 'complete';
						break;
					case '4':
						item.F_ScheduleCodeStr = '停工';
						status = 'stop';
						break;
				}
				if (!status) {
					return;
				}
				item.statusImage = `/static/image/project/${status}.png`
			},
      /**
       * 修改page参数
       * 这里只是单纯修改，请配合getList方法一起使用
       * @param page 修改为第几页
       */
      changePage(page) {
        this.query.pagination.page = page;
      },
		  /**
       * 重新设置查询条件
       * 对于本页面来说，初始化搜索条件意味着还原成search页面带来的搜索条件
       */
		  resetQuery() {
        this.changePage(1);
        this.query.queryJson.F_FullName = this.tempFullName;
      },
      /**
       * 下拉刷新时处理query，除了page设置为1外，其他都不变
       */
      refreshQuery() {
		    this.changePage(1);
      },
      /**
       * 自增page
       */
      incrementPageForQuery() {
        let current = this.query.pagination.page;
        this.changePage(current + 1);
      },
			/**
			 * 搜索框查询时调用的方法
			 */
			search() {
        this.refreshQuery();
        this.getList();
			},
			/**
			 * 搜索框输入时调用的方法
			 * @param res
			 */
			input(res) {
				this.query.queryJson.F_FullName = res.value
			},
			/**
			 * 搜索框点击取消时调用的方法
			 */
			cancel() {
			  // 重置搜索条件
				this.resetQuery();
				// 获取数据
				this.getList();
			},
			/**
			 * 跳转到项目的详情页
			 * @param index 项目在数组中的索引
			 */
			toProjectDetail(index) {
        uni.showLoading({
          title: '加载中，请稍后',
          mask: true
        })
			  let project = this.projectList[index];
				uni.navigateTo({
					url: '/pages/project/detail?project=' + encodeURIComponent(JSON.stringify(project))
				})
        uni.hideLoading()
			}
		},
    /**
     * 开始下拉刷新
     */
    onPullDownRefresh () {
      // 将page更新为1
      this.refreshQuery();
      // 获取数据
      this.getList();
      // 停止下拉刷新
      uni.stopPullDownRefresh();
    },
    /**
     * 触发上拉加载更多
     */
    onReachBottom () {
      // 判断是不是已经到底部了，到底部就不去加载了
      if (this.query.pagination.page === this.total) {
        return;
      }
      // 设置为上拉加载更多
      this.ifLoadMore = true;
      // 使page自增1
      this.incrementPageForQuery();
      // 获取数据
      this.getList(() => {
        // 做完后恢复ifLoadMore为false
        this.ifLoadMore = false;
      });
    },
		components: {
			uniList, uniListItem, uniSearchBar
		},
    /**
     * 在onReady里获取符合条件的项目记录
     */
    onReady() {
      this.getList();
      this.$refs.message.setMessageToStore(this.$refs.message)
    },
    /**
     * 在onLoad里给搜索条件赋值
     * @param options 从search里传递过来的参数
     */
    onLoad(options) {
    	if (JSON.stringify(options) !== "{}") {
				let query = JSON.parse(decodeURIComponent(options.query));
				if (query) {
					this.query.queryJson = query;
					this.tempFullName = query.F_FullName; // F_FullName这个搜索条件保存一个副本，在resetQuery中使用
				}
			}
    	console.log("02030801F4004671AF513A的CRC码为：" + CRC.ToModbusCRC16('02030801F4004671AF513A'))
		},
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
	}
</script>

<style scoped lang="scss">
	@import "~@/static/css/project/list.scss";
</style>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
